<template>
  <div>
    <el-form
      class="query-more-form"
      size="mini"
      label-width="100px"
      :model="form"
    >
      <el-row :gutter="20" class="top1">
        <el-col
          :span="6"
          v-if="
            hrefAddress != '/backlog/index' &&
            hrefAddress != '/handled/index' &&
            hrefAddress != '/eventList/index' &&
            hrefAddress != '/networkList/index' &&
            hrefAddress != '/networkReturnList/index' &&
            hrefAddress != '/dashboard' &&
            hrefAddress != '/businessSupervision/index'&&
            hrefAddress != '/networkDelayList/index'&&
            hrefAddress != '/delay/index'
          "
        >
          <el-form-item label="来源类型">
            <el-select
              v-model="form.sourceCode"
              class="search-ipt w-100"
              placeholder="请选择来源类型"
              clearable
              filterable
              @change="changeSourceType"
            >
              <el-option
                v-for="(item, index) in SourceType"
                :key="index + '_id_source'"
                :value="item.code"
                :label="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="hrefAddress!='/waitDispatchOrder/index'&&
                                hrefAddress!='/sureDispatchOrder/index'">
          <el-form-item label="工单编号">
            <el-input
              v-model="form.workNum"
              class="search-ipt"
              clearable
              placeholder="请输入工单编号"
              maxlength="255"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="hrefAddress!='/waitDispatchOrder/index'&&
                                hrefAddress!='/sureDispatchOrder/index'">
          <el-form-item label="部门名称">
            <el-select
              v-model="form.branch"
              class="search-ipt w-100"
              placeholder="请选择部门名称"
              clearable
              filterable
            >
            <el-option value="0" label="智慧治理中心"></el-option>
            <el-option value="1" label="大划综合执法协调办公室"></el-option>
            <el-option value="2" label="市水务局"></el-option>
            <el-option value="3" label="上元社区"></el-option>
              <!-- <el-option
                v-for="(item, index) in SourceType"
                :key="index + '_id_source'"
                :value="item.code"
                :label="item.value"
              /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="
            hrefAddress == '/handled/index' ||
            hrefAddress == '/eventList/index' ||
            hrefAddress == '/businessSupervision/index'
          "
        >
          <el-form-item label="来源编号">
            <el-select
              v-model="form.sourceCode"
              class="search-ipt w-100"
              placeholder="请选择来源编号"
              clearable
              filterable
              @change="changeSourceType"
            >
              <el-option
                v-for="(item, index) in SourceType"
                :key="index + '_id_source'"
                :value="item.code"
                :label="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 新的 -->
        <el-col
          :span="6"
          v-if="
              hrefAddress == '/networkList/index' ||
              hrefAddress == '/networkReturnList/index' 
          "
        >
        <el-form-item label="来源编号">
            <el-input
              value="网络理政"
              class="search-ipt"
              maxlength="255"
              disabled
            />
          </el-form-item>
          <!-- <el-form-item label="来源编号">
            <el-select
              v-model="form.sourceCode"
              value="网络理政"
              class="search-ipt w-100"
              placeholder="请选择来源编号"
              clearable
              filterable
              @change="changeSourceType"
            >
              <el-option
                key="0_id_source"
                value="1001"
                label="网络理政"
                selected
              />
            </el-select>
          </el-form-item> -->
        </el-col>
        <el-col :span="6">
            <el-form-item label="工单类型" prop="labelsData">
            <el-select
              class="w-100"
              v-model="form.formType"
              placeholder="请选择工单类型"
            >
              <el-option value="0" label="电话工单"/>
              <el-option value="1" label="信件工单"/>
              <el-option value="2" label="短信工单"/>
              <el-option value="3" label="信件和网络理政"/>
            </el-select> </el-form-item
        ></el-col>
        <el-col
        v-if=" hrefAddress != '/networkDelayList/index'&&
            hrefAddress != '/delay/index'&&
            hrefAddress != '/backlog/index'&&
            hrefAddress != '/dashboard'&&
            hrefAddress != '/handled/index'"
            :span="
            hrefAddress == '/handled/index' ||
            hrefAddress == '/eventList/index' ||
            hrefAddress == '/networkList/index' ||
            hrefAddress == '/networkReturnList/index' ||
            hrefAddress == '/businessSupervision/index'
              ? 6
              : 6
          "
          ><el-form-item label="权责清单" prop="threeType" class="threeType"
            ><el-input
              v-model="form.categoryCompleteName"
              ref="threeType"
              clearable
              placeholder="请输入权责清单"
              @focus="openThreeType"
              maxlength="255"/></el-form-item
        ></el-col>
        <el-col
          :span="6"
          v-if="
              hrefAddress == '/eventList/index' ||
              hrefAddress == '/networkList/index' ||
              hrefAddress == '/networkReturnList/index' ||
              hrefAddress == '/businessSupervision/index'
          "
        >
          <el-form-item label="处置状态">
            <el-select
              v-model="form.handleStatus"
              class="search-ipt w-100"
              placeholder="请选处置状态"
              clearable
              filterable >
              <el-option value="30" label="已结案"/>
              <el-option value="20" label="处理中"/>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6"
          ><el-button size="mini" class="submit-btn" @click="openThreeType"
            >选择清单</el-button
          ></el-col
        > -->
        <el-col
          :span="6"
          v-if="
            hrefAddress == '/waitDispatchOrder/index' ||
            hrefAddress == '/sureDispatchOrder/index'||
            hrefAddress == '/handled/index'
          "
          ><el-form-item label="诉求类型" prop="labelsData">
            <el-select
              class="w-100"
              v-model="form.type"
              placeholder="请选择诉求类型"
            >
              <el-option
                v-for="item in appealTypeArr"
                :key="item.id"
                :value="item.value"
                :label="item.value"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col
          :span="6"
          class="btn-col"
          v-if="
            hrefAddress == '/waitDispatchOrder/index' ||
            hrefAddress == '/sureDispatchOrder/index'||
            hrefAddress == '/backlog/index'||
            hrefAddress == '/dashboard'
          "
        >
          <el-button
            size="mini"
            class="search-btn"
            type="primary"
            @click="handleQuery"
            :disabled="handleQueryDisabled"
            >查询</el-button
          >
          <el-button
            size="mini"
            class="reset-btn"
            type="primary"
            @click="clearQuery"
            >重置</el-button
          >
        </el-col>
      </el-row>
<!-- hrefAddress == '/backlog/index' ||
            hrefAddress == '/handled/index' ||
            hrefAddress == '/eventList/index' ||
            hrefAddress == '/dashboard' ||
            hrefAddress == '/businessSupervision/index' -->
      <el-row
        :gutter="20"
        v-if="
          hrefAddress != '/waitDispatchOrder/index' &&
            hrefAddress != '/sureDispatchOrder/index' &&
            hrefAddress != '/dashboard' &&
            hrefAddress != '/businessSupervision/index'&&
            hrefAddress != '/networkDelayList/index'&&
            hrefAddress != '/delay/index'&&
            hrefAddress != '/backlog/index'
        "
      >
        <el-col :span="6"
          ><el-form-item label="区/市/县" prop="addressCity">
            <el-select
              class="w-100"
              v-model="form.addressCity"
              placeholder="请选择区/市/县"
              @change="changeRessStreet"
              clearable
              filterable
            >
              <el-option
                v-for="item in addressCityArr"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="街道/乡镇" prop="addressStreet">
            <el-select
              class="w-100"
              v-model="form.addressStreet"
              placeholder="请选择街道/乡镇"
              @change="changeDetailedUser"
              clearable
              filterable
            >
              <el-option
                v-for="item in addressStreetArr"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="社区/村" prop="addressDetailedUser">
            <el-select
              class="w-100"
              v-model="form.addressDetailedUser"
              placeholder="请选择社区/村"
              clearable
              filterable
            >
              <el-option
                v-for="item in addressDetailedUserArr"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6"
          v-if="
          hrefAddress != '/waitDispatchOrder/index' &&
            hrefAddress != '/sureDispatchOrder/index' &&
            hrefAddress != '/backlog/index' &&
            hrefAddress != '/handled/index' &&
            hrefAddress != '/eventList/index' &&
            hrefAddress != '/networkList/index' &&
            hrefAddress != '/networkReturnList/index' &&
            hrefAddress != '/dashboard' &&
            hrefAddress != '/businessSupervision/index'&&
            hrefAddress != '/networkDelayList/index'&&
            hrefAddress != '/delay/index'
        "
          ><el-form-item label="标签集" prop="labelsData">
            <el-select
              class="w-100"
              v-model="form.labelsData"
              placeholder="请选择案件标签"
              @visible-change="changeCaseLable"
              @remove-tag="removeCaseLable"
            >
              <el-option
                v-for="item in labelListArr"
                :key="item.id"
                :value="item.name"
                :label="item.name"
              >
              </el-option>
            </el-select> </el-form-item
        ></el-col>
        
      </el-row>
    <el-row :gutter="20" v-if=" hrefAddress == '/networkList/index'" >
      <el-col :span="6"><el-form-item label="工单类型" prop="labelsData">
            <el-select
              class="w-100"
              v-model="form.formType"
              placeholder="请选择工单类型"
            >
              <el-option value="0" label="电话工单"/>
              <el-option value="1" label="信件工单"/>
              <el-option value="2" label="短信工单"/>
              <el-option value="3" label="信件和网络理政"/>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6">  
          <el-form-item label="来电号码">
            <el-input
              v-model="form.phone"
              class="search-ipt"
              clearable
              placeholder="请输入来电号码"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="6">
          <el-form-item label="来电人">
            <el-input
              v-model="form.reportName"
              class="search-ipt"
              clearable
              placeholder="请输入来电人"
              maxlength="8"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        v-if="
            hrefAddress != '/waitDispatchOrder/index' &&
            hrefAddress != '/sureDispatchOrder/index' &&
            hrefAddress != '/backlog/index'&&
            hrefAddress != '/dashboard'
        "
      >
        <el-col :span="6">
          <el-form-item label="案件编号">
            <el-input
              v-model="form.caseCode"
              class="search-ipt"
              clearable
              placeholder="请输入案件编号"
              maxlength="255"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if=" hrefAddress != '/networkDelayList/index'&&
            hrefAddress != '/delay/index'">
          <el-form-item label="时间区间">
            <el-date-picker
              prop="reportTime"
              v-model="form.reportTime"
              type="datetimerange"
              size="mini"
              range-separator="-"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="btn-col">
          <el-button
            size="mini"
            class="search-btn"
            type="primary"
            @click="handleQuery"
            >查询</el-button
          >
          <el-button
            size="mini"
            class="reset-btn"
            type="primary"
            @click="clearQuery"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <!-- 三级分类弹窗 -->
    <ThreeTypeDialog
      :dialogVisible="ThreeTypeDialogVisible"
      @closeDialog="ThreeTypeDialogVisible = false"
      @threeTypeMsg="threeTypeMsg"
    />
  </div>
</template>
<script>
import ThreeTypeDialog from "@/views/casedeal/components/threeTypeDialog";
import {
  report,
  sourceType,
  region,
  categoryType,
  category,
  historyWork,
  analysis,
  getMapMsg,
  getLabelList
} from "@/api/case.js";
export default {
  name: "CaseDealDispatch",
  components: {
    ThreeTypeDialog
  },
  data() {
    return {
      form: {
        caseCode: null,
        reportTime: [startDate(),getNowFormatDate()],
        sourceCode: null,
        addressCity: null,
        addressStreet: null,
        addressDetailedUser: null,
        industry: null,
        majorCategories: null,
        subclass: null,
        categoryCompleteName: null,
        labelsData: [],
        categoryCode: null,
        label: null,
        handleStatus:null,
        formType:null,
        reportName:null,
        phone:null,
        workNum:null,
        branch:null,
      },

      hrefAddress: "", //路由地址

      //   区 市 县
      addressCityArr: [],

      //   诉求类型下拉框
      appealTypeArr: [],

      // 街道、乡镇
      addressStreetArr: [],

      // 社区、村
      addressDetailedUserArr: [],

      //   行业
      industryArr: [],

      //   大类
      majorCategoriesArr: [],

      //小类
      subclassArr: [],

      //   来源类型下拉框
      SourceType: [],

      // 查询按钮是否为禁用按钮
      handleQueryDisabled: false,

      ThreeTypeDialogVisible: false,

      remarks: null,

      // 标签集
      labelListArr: []
    };
  },
  methods: {
    // 获取区县
    getRegion() {
      region({
        level: 1
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.addressCityArr = rows;
        })
        .catch({});
    },

    // 获取诉求信息
    getAppealType() {
      categoryType({
        sysGroup: "caseType"
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.appealTypeArr = rows;
        })
        .catch({});
    },

    changeSourceType(val) {
      this.SourceType.forEach(item => {
        if (item.code == val) {
          this.remarks = item.remarks;
          this.form.categoryCompleteName = null;
        }
      });
    },

    // 选择标签集
    changeCaseLable() {
      if (this.form.labelsData.length)
        this.form.label = this.form.labelsData.toString();
    },

    // 移除标签集
    removeCaseLable() {
      this.form.label = this.form.labelsData.toString();
    },

    // 查询所有的标签集
    getAllLabelList() {
      getLabelList()
        .then(result => {
          let { code, rows } = result;
          if (code == 200) {
            this.labelListArr = rows;
          }
        })
        .catch();
    },

    // 获取街道乡镇
    changeRessStreet(value) {
      region({
        parentCode: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.addressStreetArr = rows;
        })
        .catch({});
    },

    // 获取社区、村
    changeDetailedUser(value) {
      region({
        parentCode: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.addressDetailedUserArr = rows;
        })
        .catch({});
    },

    // 获取行业
    getIndustry() {
      sourceType({
        parentId: 0
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.industryArr = rows;
        })
        .catch({});
    },

    // 获取大类
    changeMajorCategories(value) {
      sourceType({
        parentId: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.majorCategoriesArr = rows;
        })
        .catch({});
    },

    // 获取小类
    changeSubclass(value) {
      sourceType({
        parentId: value
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.subclassArr = rows;
        })
        .catch({});
    },

    // 获取来源信息
    getSourceType() {
      categoryType({
        sysGroup: "caseSource"
      })
        .then(result => {
          let { rows, code } = result;
          if (code == 200) this.SourceType = rows;
        })
        .catch({});
    },

    // 查询
    handleQuery() {
      if (this.form.reportTime != null) {
        this.form.startTime = (new Date(this.form.reportTime[0]+' '+'00:00:00')).getTime();
        this.form.endTime = (new Date(this.form.reportTime[1]+' '+'23:59:59')).getTime();
        this.handleQueryDisabled = true;
      }else{
         this.form.startTime =null;
        this.form.endTime = null;
      }

      // 获取当前浏览器地址
      let address = location.href.substr(
        location.href.indexOf("#") + 1,
        location.href.length
      );
      this.form.address = address;
      this.$bus.emit("formDatas", this.form);
    },

    // 重置
    clearQuery() {
      this.form = {
        caseCode: null,
        reportTime: [startDate(),getNowFormatDate()],
        sourceCode: null,
        addressCity: null,
        addressStreet: null,
        addressDetailedUser: null,
        industry: null,
        majorCategories: null,
        subclass: null,
        categoryCompleteName: null,
        labelsData: [],
        categoryCode: null,
        label: null,
        handleStatus:null,
        workNum:null,
      };
      setTimeout(()=>{
        this.handleQuery()
      })
    },

    // 打开三级分类的弹窗
    openThreeType() {
      this.ThreeTypeDialogVisible = true;
      this.$bus.$emit("remarks", this.remarks);
    },

    threeTypeMsg(data) {
      this.form.categoryCompleteName = data.categoryCompleteName;
      this.form.categoryCode = data.code;
    }
  },
  created() {
    // 获取来源信息
    this.getSourceType();

    // 获取区县
    this.getRegion();

    // 获取诉求信息
    this.getAppealType();

    // 获取行业
    this.getIndustry();

    this.$bus.$on("closeDisabled", data => {
      this.handleQueryDisabled = data;
    });

    // 查询所有标签集
    this.getAllLabelList();

    this.hrefAddress = location.href.substr(
      location.href.indexOf("#") + 1,
      location.href.length
    );
  }
};
function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    function startDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        if(month-1==0){
          month = 12;
          year = year-1
        }else{
          month -= 1;
        }
        var strDate = 1;
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
</script>

<style lang="scss" scoped>
// ele_时间框长度 100%;
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 100%;
}
.el-form-item--mini.el-form-item {
    margin-bottom: 12px;
}
</style>
